<template>
  <div class="home" :class="{ pb: $route.meta.showTabbar }">
    <keep-alive include="my,bost">
      <router-view></router-view>
    </keep-alive>
    <van-tabbar
      class="height"
      v-model="active"
      route
      v-show="$route.meta.showTabbar"
    >
      <!-- 发现 -->
      <van-tabbar-item name="find" to="/home/find/find">
        <span>发现</span>
        <template #icon>
          <i class="iconfont">&#xe603;</i>
        </template>
      </van-tabbar-item>
      <!-- 主播 -->
      <van-tabbar-item name="bost" to="/home/bost">
        <span>主播</span>
        <template #icon>
          <i class="iconfont">&#xe617;</i>
        </template>
      </van-tabbar-item>
      <!-- 比赛 -->
      <van-tabbar-item name="play" to="/home/play">
        <span>比赛</span>
        <template #icon>
          <i class="iconfont">&#xe6c1;</i>
        </template>
      </van-tabbar-item>
      <!-- 数据 -->
      <van-tabbar-item name="date" to="/home/date">
        <span>数据</span>
        <template #icon>
          <i class="iconfont">&#xe607;</i>
        </template>
      </van-tabbar-item>
      <!-- 我的 -->
      <van-tabbar-item name="my" to="/home/my">
        <span>我的</span>
        <template #icon>
          <i class="iconfont">&#xe60a;</i>
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data () {
    return {
      active: 'my'
    }
  }
}
</script>

<style lang="less">
.home {
  .height {
    position: fixed;
    height: 60px;
    z-index: 999;
  }
  &.pb {
    padding-bottom: 50px;
  }
  .van-tabbar-item__icon {
    i {
      font-size: 18px;
    }
  }
  .van-tabbar-item__text {
    span {
      font-size: 14px;
    }
  }
  // transition切换的效果 淡入 淡出
  // .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.1s;
  }
  // .fade-enter,
  .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
  }
}
</style>
